<template>
  <HomeWrap>
    <div><h2 class="page-title">个人设置</h2></div>

    <el-card shadow="hover" class="setting-card">
      <div class="setting-item" @click="handleLogout">
        <el-button type="danger" plain class="setting-button">
          <el-icon><SwitchButton /></el-icon>
          <span>退出登录</span>
        </el-button>
      </div>

      <!--      <el-divider />-->

      <!--      <div class="setting-item" @click="handleChangePassword">-->
      <!--        <el-button type="primary" plain class="setting-button">-->
      <!--          <el-icon><Unlock /></el-icon>-->
      <!--          <span>修改密码</span>-->
      <!--        </el-button>-->
      <!--      </div>-->
    </el-card>
  </HomeWrap>
</template>

<script setup lang="ts">
import { HomeWrap } from '@/components/HomeWrap'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import Cookies from 'js-cookie'
import { SwitchButton, Unlock } from '@element-plus/icons-vue'

defineOptions({
  name: 'UserSetting'
})

const router = useRouter()
const userStore = useUserStore()

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 清除用户token
      Cookies.remove('user_token')

      // 跳转到登录页
      router.push({ name: 'UserHome' })
      ElMessage.success('已退出登录')
    })
    .catch(() => {
      // 用户取消操作
    })
}

// 修改密码
const handleChangePassword = () => {
  ElMessage.info('该功能正在开发中...')
}
</script>

<style scoped>
.page-title {
  padding: 16px;
}

.setting-card {
  margin: 10px;
}

.setting-item {
  padding: 10px 0;
}

.setting-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
}

.setting-button :deep(.el-icon) {
  margin-right: 10px;
  font-size: 18px;
}
</style>
